import React, { useState } from 'react';
import { Input, Checkbox, Popover, Button } from 'antd';
const Describe = (props) => {
  const { label, show, handleObj, index, listLength } = props;
  const { handleUpdate, handleSelect, handleRemove, handleUp, handleDown } = handleObj;
  const { TextArea } = Input;
  const content = (
    <div style={{ display: 'flex' }}>
      {index !== 0 && (
        <Button style={{ marginRight: 12 }} onClick={() => handleUp(index)} type="primary">
          上移
        </Button>
      )}
      {index !== listLength - 1 && (
        <Button style={{ marginRight: 12 }} type="primary" onClick={() => handleDown(index)}>
          下移
        </Button>
      )}
      <Button type="primary" onClick={() => handleRemove(index)}>
        删除
      </Button>
    </div>
  );
  return (
    <Popover placement={'bottom'} content={content} trigger="hover">
      <div
        onClick={(e) => {
          e.stopPropagation();
          handleSelect(index);
        }}
        className={`renderSetting_text ${show && 'renderSetting_textSelect'}`}
      >
        {show && (
          <div className="renderSetting_absoluteBox">
            <div className="renderSetting_absoluteTitle">文本描述</div>
            <div className="renderSetting_absoluteContent">
              <div className="renderSetting_content_title">文本内容*</div>
              <div className="renderSetting_content_input">
                <TextArea
                  onChange={(e) => {
                    handleUpdate({
                      index: index,
                      key: 'label',
                      value: e.target.value,
                    });
                  }}
                  value={label}
                ></TextArea>
              </div>
            </div>
          </div>
        )}

        <div className="renderSetting_describe">{label}</div>
      </div>
    </Popover>
  );
};
export default Describe;
